<template>
 <div class="rating-select">
  <div class="rating-type">
    <span class="block positive" @click="select(2,$event)" :class="{'active':selectType==2}">{{desc.all}}<span class="r-count"></span></span>
    <span class="block positive" @click="select(1,$event)" :class="{'active':selectType==1}">{{desc.positive}}<span class="r-count"></span></span>
    <span class="block negative" @click="select(0,$event)"  :class="{'active':selectType==0}">{{desc.negative}}<span class="r-count"></span></span>
  </div>
  <div class="switch" :class="{'on':onlyContent==true}">
  	<span class="f-icon">+</span>
  	<span class="rat-text">只看有内容的评价</span>
  </div>

   </div>
</template>

<script>
	const POSITIVE=0;
	const NEGATIVE=1;
	const ALL=2;
	export default{
		props:{
			rating:{
				type:Array,
				default(){
					return [];
				}
			},
			selectType:{
				type:Number,
				default:ALL
			},
			onlyContent:{
				type:Boolean,
				default:false
			},
			desc:{
				type:Object,
				default(){
					return{
						all:'全部',
						positive:'满意',
						negative:'不满意'
					};
				}
			}
		},
		methods:{
			select:function(type,$event){
				if(!$event._constructed){
	    			return;
	    		}
				this.selectType=type;
			}
		}
	}
</script>

<style>
	.rating-type{
		padding: 18px 0;
		margin:0 18px;
		border-bottom: 1px solid gray;
		font-size: 0;
	}
	.block{
		display: inline-block;
		padding: 8px 12px;
		margin-right: 8px;
		font-size: 12px;
		border-radius: 1px;
		line-height: 16px;
		color: rgb(77,85,93);
	}
	.block.active{
		color: #FFFFFF;
	}
	.positive{
		background: rgba(0,160,220,0.2);
	}
	.negative{
		background: rgba(77,85,93,0.2);
	}
	.positive.active{
		background: rgb(0,160,220);
	}
	.count{
		font-size: 8px;
		margin-left: 2px;
		
	}
	.negative.active{
		background:rgb(77,85,93) ;
	}
	.switch{
		padding: 12px 18px;
		line-height: 24px;
		border-bottom: 1px solid rgba(7,17,27,0.1);
		color: rgb(147,153,159);
		font-size: 0;
	}
	.switch.on .f-icon{
		color: #00c850;
	}
	.f-icon{
		display: inline-block;
		vertical-align: top;
		font-size: 24px;
		margin-right:4px ;
	}
	.rat-text{
		display: inline-block;
		font-size: 12px;
	}
</style>